<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒仙网-白酒、红酒、洋酒、保健酒、黄酒、酒具官方旗舰店</title>
    <link rel="shortcut icon" href="imgs/favicon.ico" />
    <link rel="stylesheet" href="css/regist.css">
</head>

<body>
    <header>
        <div class="header">
            <dl>
                <a href="index.html"><img src="imgs/10001.png" alt=""></a>
                <img src="imgs/zhuc002.jpg" alt="">
            </dl>
            <ul>
                <li>欢迎来到酒仙网</li>
                <li><a href="login.html">请登录</a></li>
                <li>帮助中心<b><span></span></b>
                    <ol>
                        <li>配送说明</li>
                        <li>支付方式</li>
                        <li>售后服务</li>
                        <li>企业客户</li>
                        <li></li>
                    </ol>
                </li>
            </ul>
        </div>

    </header>
    <main>
        <ul>
            <li>
                <p>手机号</p><input type="text" name="" id="ipt"><span></span><s>请输入11位手机号</s></li>
            <li>
                <p>验证码</p><input type="text" name="" id=""><span></span><i class="yzm"></i><s></s></li>
            <li>
                <p>校验码</p><input type="text" name="" id=""><span></span><b>获取短信验证码</b><s></s></li>
            <li>
                <p>设置密码</p><input type="password" name="" id="pwd"><span></span><s>8-20位字符,数字、大小写字母、符号三种组成</s></li>
            <li>
                <p>确认密码</p><input type="password" name="" id=""><span></span><s></s></li>
            <li>
                <input type="checkbox" name="" id="">
                <dl>
                    <dd>我已阅读并同意</dd>
                    <dd href="">《酒仙网用户注册协议》</dd>
                    <dd href="">《酒仙网隐私协议》</dd>
                </dl>
            </li>
            <li>
                <p></p><button onclick="reg()">立&nbsp;即&nbsp;注&nbsp;册</button></li>
        </ul>
        <script src="js/axios.js"></script>
        <script>
            function reg() {

                console.log("ooo");
                axios
                    .get("http://jx.xuzhixiang.top/ap/api/reg.php", {
                        params: {
                            username: ipt.value,
                            password: pwd.value,
                        },
                    })
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 1) {
                            location.href = "login.html";
                        } else {
                            alert("chongshi");
                        }
                    });
            }
            let oI = document.querySelector('.yzm');


            function getRandCode() {
                let code = "";
                for (let i = 0; i < 4; i++) {
                    let randNum = parseInt(Math.random() * 43 + 48);
                    if (
                        (randNum >= 48 && randNum <= 57) ||
                        (randNum >= 65 && randNum <= 90)
                    ) {
                        var char = String.fromCharCode(randNum);
                        code += char;
                    } else {
                        i--;
                    }
                }
                return code;
            }
            oI.innerHTML = getRandCode();
            oI.onclick = function() {
                    getRandCode();

                }
                //手机
            let aInput = document.querySelectorAll('input');
            let aS = document.querySelectorAll('s');
            let reg1 = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
            aInput[0].onblur = function() {
                let val = aInput[0].value;
                if (reg1.test(val)) {
                    aS[0].style.display = 'none';
                } else {
                    aS[0].style.display = 'block';
                    aS[0].style.backgroundColor = '#e10303';
                    aS[0].innerText = "* 请输入手机号";
                }
            };
            //最小长度
            let reg2 = /^.{4,}$/s;
            aInput[1].onblur = function() {
                var val = aInput[1].value;
                if (reg2.test(val)) {
                    aS[1].style.display = 'none';
                } else {
                    aS[1].style.display = 'block';
                    aS[1].style.backgroundColor = '#e10303';
                    aS[1].innerText = "* 请输入验证码";
                }
            };
            //最小长度
            let reg3 = /^.{6,}$/s;
            aInput[2].onblur = function() {
                var val = aInput[2].value;
                if (reg3.test(val)) {
                    aS[2].style.display = 'none';
                } else {
                    aS[2].style.display = 'block';
                    aS[2].style.backgroundColor = '#e10303';
                    aS[2].innerText = "* 请输入校验码";
                }
            };
            //密码
            let reg4 = /^[0-9a-zA-Z_]\w{8,20}$/;
            aInput[3].onblur = function() {
                let val = aInput[3].value;
                if (reg4.test(val)) {
                    aS[3].style.display = 'none';
                } else {
                    aS[3].style.display = 'block';
                    aS[3].style.backgroundColor = '#e10303';
                    aS[3].innerText = "* 输入密码";
                }
            };
            //重置密码
            let reg5 = /^[0-9a-zA-Z_]\w{8,20}$/;
            aInput[4].onblur = function() {
                let val = aInput[4].value;
                if (reg5.test(val)) {
                    aS[4].style.display = 'none';
                } else {
                    aS[4].style.display = 'block';
                    aS[4].style.backgroundColor = '#e10303';
                    aS[4].innerText = "* 请再次输入密码";
                }
            };
            aInput[0].onclick = function() {
                    aS[0].style.display = 'block';
                }
                // console.log(aS);
        </script>
    </main>
    <footer>
        <div class="footer">
            <p>© 酒仙网 2011 jiuxian.com All Rights Reserved 京ICP证110141号 京公网安备1101050188221</p>
            <span>购买前请确认达到法定饮酒年龄!酒仙网不销售任何含酒精产品给18岁以下人士!</span>
        </div>
    </footer>
</body>

</html>